<template>
  <div class="fate-detail">
    <x-header :left-options="{backText: ''}">来表白</x-header>
    <group title="每周主题名称">
      <swiper height="110px" :list="imgList" v-model="imgVal" @on-index-change="changeImg"></swiper>
    </group>
    <cell class="item-list-box" @click.native="$router.push('/fatedetail')">
      <div class="top">
        <div class="left">
          <avatar username="Lairenna Doe" :size="40"></avatar>
          <img class='attention' src="../../../static/attention.png"  width='20' height='20'   @click.stop="$emit('focusman', item)"/>
        </div>
        <div class="right">
          <div class="right-1">
            <div>昵称一</div>
            <div>
              <span>5分钟前</span>
              <span>来自。。。</span>
            </div>
          </div>
          <div class="right-2">
            <span><i class="icon-dianzan1"></i>99</span>
          </div>
        </div>
      </div>
      <p class="type">缘分天空</p>
      <div class="main">
        <div class="con">
          这个插件与别的插件不同的是，这个插件简单，默认情况下，没有字幕，导航按钮或背景封面，因此开发者可以根据自身的需要来安装这个插件所提供的规范来改造它。特别讨厌一些lightbox插件，自身带有复杂的样式和功能，开发者很难根据自身的需要来使用它。这个插件还有一个非常吸引我的特点，就是
        </div>
      </div>
    </cell>
  </div>
</template>
<script>
import { Vue, Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';
import Avatar from 'vue-avatar';
import { Previewer, Confirm, Cell, Group, XInput, XHeader, Swiper } from 'vux';
const HomeStore = namespace('home');
@Component({
  components: { Avatar, Previewer, Confirm, Cell, XInput, Group, XHeader, Swiper }
})
export default class Item extends Vue {
  @HomeStore.Action getLikePost;
  showConfirm = false
  imgVal = ''
  cacelList = {
  	0: '不再看到此条帖子',
  	// 1: '减少此人的帖子',
  	// 2: '对此内容不感兴趣',
  	1: '举报'
  }
  list = [
    {
      msrc: '../../static/logo.png',
      src: '../../static/logo.png',
      w: 800,
      h: 400
    }
  ]
  imgList = [{
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
    title: '送你一朵fua'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
    title: '送你一辆车'
  }, {
    url: 'javascript:',
    img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg', // 404
    title: '送你一次旅行',
    fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
  }]
  changeImg (index) {
    this.imgVal = index
  }
  logIndexChange (arg) {
  }
  show (index) {
    this.$refs.previewer.show(index)
  }
  click (key) {
    if (key === '1') {
      this.$router.push(`/report/${this.id}`)
    }
  }
  options = {
    getThumbBoundsFn (index) {
      let thumbnail = document.querySelectorAll('.previewer-demo-img')[index]
      let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
      let rect = thumbnail.getBoundingClientRect()
      return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
    }
  }
}
</script>
<style lang="less">
.fate-detail {
  padding-top: 46px;
}
.item-list-box:before {
    content: initial !important;
  }
  .item-list-box {
    // font-size: 12px;
    background: #ffffff;
    margin-top: 15px;
    border-radius: 10px;
    margin: 0 auto;
    width: 95%;
    border-radius: 10px;
    margin-top: 5px;
    padding: 10px 20px;
    .weui-cell__ft {
      text-align: left;
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .img-list {
      display: flex;
      width: 95%;
      align-items: center;
      flex-wrap: wrap;
      padding-bottom: 10px;
      img{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 200px;
        min-height: 70px;
        min-width: 70px;
      }
    }
    .foot {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 10px;
      span {
        margin-left: 30px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
      i {
        margin-right: 5px;
        font-size: 18px;
        color: #dd9494;
      }
    }
    .con {
      line-height: 24px;
      padding-bottom: 10px;
      overflow: hidden;
      -webkit-line-clamp: 2;
      display: -webkit-box;
      -webkit-box-orient: vertical;
    }
    .img {
      width: 100%;
      height: 120px;
    }
    .type {
      color: #666666;
    }
    .focusman {
      height: 18px;
      // border: 1px solid #E5E5E5;
      padding: 0px 8px;
      color: #666666;
      // font-size: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .top {
      height: 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .left {
      width: 20%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      .attention{
      	position: absolute;
      	bottom:2px;
      	right:9%;
      	color: #D36566;
        border-radius:50%;
      }
    }
    .right {
      width: 80%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .right-1 {
      display: flex;
      flex-direction: column;
    }
    .right-2 {
      display: flex;
      align-items: center;
      justify-content: center;
      i {
        margin-right: 5px;
      }
    }
    .bot {
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
    }
     .main{
	    padding-left: 20%;
    }
  }
</style>


